<div class="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
            用户注册
        </h2>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">

            <!-- Flash 消息显示区域 -->
            <%= if @flash["error"] do %>
            <div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative">
                <span class="block sm:inline"><%= @flash["error"] %></span>
            </div>
            <% end %>

            <%= if @flash["info"] do %>
            <div class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded relative">
                <span class="block sm:inline"><%= @flash["info"] %></span>
            </div>
            <% end %>

            <.form for={assigns[:changeset] || %{}} action={~p"/register"} method="post" class="space-y-6">

            <!-- 账号字段 - 完善版 -->
            <div>
                <label for="user_account" class="block text-sm font-medium text-gray-700">
                    账号 <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <input
                        id="user_account"
                        name="user[account]"
                        type="text"
                        required
                        value={get_field_value(assigns, :account)}
                        class={"appearance-none block w-full px-3 py-2 border rounded-md placeholder-gray-400 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm #{get_field_error_class(assigns, :account)}"}
                        placeholder="请输入账号（3-20个字符）"
                    />
                </div>
                <%= if has_field_error?(assigns, :account) do %>
                    <p class="mt-2 text-sm text-red-600">
                        <%= get_field_error_message(assigns, :account) %>
                    </p>
                <% end %>
            </div>


            <!-- 昵称字段 -->
            <div>
                <label for="user_nickname" class="block text-sm font-medium text-gray-700">
                昵称
                </label>
                <div class="mt-1">
                <input
                    id="user_nickname"
                    name="user[nickname]"
                    type="text"
                    required
                    value={if assigns[:changeset], do: Ecto.Changeset.get_field(@changeset, :nickname) || "", else: ""}
                    class={"appearance-none block w-full px-3 py-2 border rounded-md placeholder-gray-400 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm #{if assigns[:changeset] && @changeset.errors[:nickname], do: "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500", else: "border-gray-300"}"}
                    placeholder="请输入昵称"
                />
                </div>
                <%= if assigns[:changeset] && @changeset.errors[:nickname] do %>
                <p class="mt-2 text-sm text-red-600">
                    <%= translate_error(@changeset.errors[:nickname]) %>
                </p>
                <% end %>
            </div>

            <!-- 密码字段 - 推荐版本 -->
            <div>
                <label for="user_password" class="block text-sm font-medium text-gray-700">
                    密码 <span class="text-red-500">*</span>
                </label>
                <div class="mt-1 relative">
                    <input
                        id="user_password"
                        name="user[password]"
                        type="password"
                        required
                        class={"appearance-none block w-full px-3 py-2 border rounded-md placeholder-gray-400 focus:outline-none focus:ring-brand focus:border-brand sm:text-sm #{get_field_error_class(assigns, :password)}"}
                        placeholder="请输入密码（至少6位字符）"
                        minlength="6"
                        maxlength="100"
                    />
                    <%= if has_field_error?(assigns, :password) do %>
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    <% end %>
                </div>

                <%= if has_field_error?(assigns, :password) do %>
                    <p class="mt-2 text-sm text-red-600">
                        <%= get_field_error_message(assigns, :password) %>
                    </p>
                <% end %>

                <p class="mt-1 text-sm text-gray-500">
                    密码至少6位字符,建议包含字母和数字
                </p>
            </div>


            <div class="flex items-center justify-between">
                <div class="text-sm">
                <a href={~p"/login"} class="font-medium text-brand hover:text-orange-500">
                    已有账号？立即登录
                </a>
                </div>
            </div>

            <div>
                <button
                    type="submit"
                    class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand"
                >
                注册
                </button>
            </div>
            </.form>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input[required]');

    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            validateField(this);
        });
    });

    function validateField(field) {
        const value = field.value.trim();
        const fieldName = field.name.split('[')[1].replace(']', '');

        clearFieldError(field);

        if (!value) {
            showFieldError(field, '此字段不能为空');
            return false;
        }

        switch(fieldName) {
            case 'account':
                if (value.length < 3 || value.length > 20) {
                    showFieldError(field, '账号长度应在3-20个字符之间');
                    return false;
                }
                if (!/^[a-zA-Z0-9_]+$/.test(value)) {
                    showFieldError(field, '账号只能包含字母、数字和下划线');
                    return false;
                }
                break;~
            case 'password':
                if (value.length < 6) {
                    showFieldError(field, '密码至少需要6个字符');
                    return false;
                }
                break;
        }

        return true;
    }

    function showFieldError(field, message) {
        field.className = field.className.replace(/border-gray-300/g, '') +
            ' border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 bg-red-50';

        let errorMsg = field.parentElement.parentElement.querySelector('.client-error');
        if (!errorMsg) {
            errorMsg = document.createElement('p');
            errorMsg.className = 'client-error mt-2 text-sm text-red-600';
            field.parentElement.parentElement.appendChild(errorMsg);
        }
        errorMsg.textContent = message;
    }

    function clearFieldError(field) {
        field.className = field.className.replace(/border-red-300|text-red-900|placeholder-red-300|focus:ring-red-500|focus:border-red-500|bg-red-50/g, '') +
            ' border-gray-300';

        const errorMsg = field.parentElement.parentElement.querySelector('.client-error');
        if (errorMsg) {
            errorMsg.remove();
        }
    }
});
</script>
